<!doctype html>
<html>
  <head>
    <meta charset='UTF-8' />
    <title>deck.gl widget example</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }

      @media screen and (max-width: 600px) {
        .deck-widget {
          /* mobile */
          --button-size: 48px;
          --button-corner-radius: 12px;
        }
      }

      .purple {
        --button-background: hsl(240, 40%, 40%);
        --button-stroke: hsla(240, 40%, 40%, 0.3);
        --button-icon-hover: rgb(236, 236, 236);
        --button-icon-idle: rgb(174, 174, 202);
      }
    </style>
  </head>

  <body>
    <script type="module" src="app.js"></script>
  </body>
</html>
